<%layout("/common/_layout.html"){%>
<%#ajax userTable:{%>
<div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;"> <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
  <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">统计分析</strong> / <small>政企统计数据详情</small></div>
</div>
 <div class="am-g">
    <div class="am-u-sm-12">
        <form class="am-form" id="listForm" action="${base}/pageview/list" method="post">
        <input type="hidden" id="keywords" name="keywords" value='${keywords!""}' />
        <input type="hidden" id="user_id" name="user_id" value='${user_id!""}' />
        <input type="hidden" id="city" name="city" value='${city!""}' />
        <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;">
          <tbody>
            <tr>
              <th class="am-text-middle">模块名称</th>
              <td>
                <div class="am-u-sm-10">
                  <input type="text" id="module_name" class="am-form-field am-input-sm" value="${module_name!}" />
                </div>
              </td>
              <th class="am-text-middle">访问时间</th>
              <td>
              <div class="am-u-sm-10">
                <div class="am-form am-form-inline">
                  <div class="am-form-group am-form-icon">
                    <i class="am-icon-calendar"></i>
                    <input type="text" class="am-form-field am-input-sm" id="startTime" value="${startTime!}" placeholder="开始日期" data-am-datepicker>
                  </div>
                  <div class="am-form-group">至</div>
                  <div class="am-form-group am-form-icon">
                    <i class="am-icon-calendar"></i>
                    <input type="text" class="am-form-field am-input-sm" id="endTime" value="${endTime!}" placeholder="结束日期" data-am-datepicker>
                  </div>
                </div>
              </div>
            </td>
            </tr>
            <tr>
              <th class="am-text-middle">手机号码</th>
              <td>
                <div class="am-u-sm-10">
                  <input type="text" id="telephone" class="am-form-field am-input-sm" value="${telephone!}" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'') " 
                        onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
                </div>
              </td>
              <th class="am-text-middle">工号</th>
              <td>
                <div class="am-u-sm-10">
                  <input type="text" id="empCode" class="am-form-field am-input-sm" value="${empCode!}" />
                </div>
              </td>
            </tr>
            <tr>
                <td colspan="4">
                  <div align='right'>
                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary" id="submit-btn">搜索</button>
                    <%if(so.hasPermission("PV_DETAILS_EXPORT")) {%>
                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary" id="export-btn">导出</button>
                    <%}%>
                  </div>
                </td>
            </tr>
            <tr id="download" style="display:none">
                <td colspan="4">
                  <div align='center'>
                    <a id="downloadlink" href="#">导出成功，点击下载</a>
                  </div>
                </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
 </div>
  <div class="am-g">
    <div class="am-u-sm-12">
    <div class="am-scrollable-horizontal">
      <table class="am-table am-table-striped am-table-hover table-main">
        <thead>
          <tr class="am-text-nowrap">
             <th class="table-title">手机号码</th>
             <th class="table-title">工号</th>
             <th class="table-title">用户名称</th>
             <th class="table-title">城市</th>
             <th class="table-title">地区</th>
             <th class="table-title">模块名称</th>
             <th class="table-title">访问时间</th>
             <th class="table-title">次数</th>
          </tr>
        </thead>
        <tbody>
       <%for(list in pager.list!){%>
         <tr>
           <td>${list.telephone}</td>
           <td>${list.emp_code}</td>
           <td>${list.user_name}</td>
           <td>${list.city}</td>
           <td>${list.area}</td>
           <td>${list.module_name}</td>
           <td>${list.login_time}</td>
           <td>${list.login_count}</td>
         </tr>
       <%}%> 
     </tbody>
     </table>
     </div>
      <div class="am-cf">
         <!-- 分页 -->
         <%if (pager.list.~size > 0){%>
             <div class="am-fr">
                 <% include("/admin/common_pager.tpl"){}%>
             </div>
         <%}else{%>
             <div class="am-kai">
               <h3>没有找到任何记录!</h3>
             </div>
         <%}%>
      </div>
    
    </div>
  </div>

<script type="text/javascript">
    $(function(){
    
      function setKeyWords(){
      	if($("#type").val())
        	keywordsObj.type = $("#type").val();
        if($("#empCode").val())
          	keywordsObj.empCode = $("#empCode").val();
        if($("#telephone").val())
            keywordsObj.telephone = $("#telephone").val();
        if($("#module_name").val())
            keywordsObj.module_name = $("#module_name").val();
        if($("#startTime").val())
          	keywordsObj.startTime = $("#startTime").val();
        if($("#endTime").val())
          	keywordsObj.endTime = $("#endTime").val();
        if($("#user_id").val())
          	keywordsObj.user_id = $("#user_id").val();
        if($("#city").val())
          	keywordsObj.city = $("#city").val();

        var keywords = "";
        if(!$.isEmptyObject(keywordsObj)){
          keywords = JSON.stringify(keywordsObj);
        }
        console.log("keywords = "+ keywords);
        $("#keywords").val(keywords);
      }
      var keywordsObj = {};
      $("#submit-btn").on("click",function(){
      	setKeyWords();
        
        $("#listForm").submit();
      });
      
      $("#export-btn").on("click",function(){
          $('#download').hide();
          //loading层
          var index = parent.layer.load(0, {
              shade: [0.1,'#fff'] //0.1透明度的白色背景
          });
          setKeyWords();
          var formParam = $("#listForm").serialize();//序列化表格内容为字符串  
          $.ajax({  
            type:'post',      
            url:'${base}/pageview/exportDetails',  
            data:formParam,  
            success:function(data){              
               console.log(data);
               if(data.status==1){
                 $('#downloadlink').text(data.message);
                 $('#downloadlink').attr('href',data.url);
                 $('#download').show();
              }else{
                 $('#downloadlink').text(data.message);
                 $('#download').show();
              }
              parent.layer.close(index);
            },
            error: function() { 
               parent.layer.close(index);
            } 
          }); 
        });
    });
  </script>
  <%}%>
<%}%>
